<script setup lang="ts">
import { inject, onMounted, reactive, watch } from "vue";
import { storeToRefs } from "pinia";
import type { Ref } from "vue";
import type { Comment, CommentPageParams, GoodDetail } from "@/types/detailTypes/detailTypes.ts";
import useDetailStore from "@/pinia/modules/detailStore/detailStore.ts";
import CommentHead from "@/views/detail/components/tabs/components/Evaluate/commentHead.vue";
import CommentSort from "@/views/detail/components/tabs/components/Evaluate/commentSort.vue";
import CommentList from "@/views/detail/components/tabs/components/Evaluate/commentList.vue";

const goodDetail = inject<Ref<GoodDetail>>("goodDetail");

const detailStore = useDetailStore();


const { evaluateInfo, commentList }: { evaluateInfo: Ref<Comment>, commentList: Ref<Comment> } = storeToRefs(detailStore);


/*获取评论列表的参数*/
const commentPageParams = reactive<CommentPageParams>({
   page: 1,
   pageSize: 10,
   hasPicture: false,
   tag: null,
   sortField: null,
   sortMethod: "desc",
});


watch(commentPageParams, () => {
   detailStore.fetchCommentList(goodDetail?.value.id as string, commentPageParams);
}, { immediate: true });


onMounted(() => {
   detailStore.fetchEvaluateInfo(goodDetail?.value.id as string);
});


</script>

<template>
   <div class="evaluate">
      <comment-head :evaluate-info="evaluateInfo" v-model:tag="commentPageParams.tag" v-model:hasPicture="commentPageParams.hasPicture"></comment-head>
      <comment-sort v-model:sortField="commentPageParams.sortField"></comment-sort>
      <comment-list :comment-list="commentList.items"></comment-list>
      <el-pagination
         v-model:current-page="commentPageParams.page" v-model:page-size="commentPageParams.pageSize"
         :page-sizes="[10,20,30,40,50]" background layout="total, sizes, prev, pager, next, jumper"
         :total="Number(commentList.counts)">
      </el-pagination>
   </div>
</template>

<style scoped lang="less">
.el-pagination {
   display: flex;
   justify-content: center;
   padding: 20px 0;
}
</style>
